<template>
  <div class="live-container">
    <div class="live-content">
      <!-- 左侧直播播放器 -->
      <div class="live-player-container">
        <div class="live-header">
          <h1>{{ liveDetail.liveTitle }}</h1>
          <p class="live-id">直播ID: {{ liveDetail.liveId }}</p>
        </div>
        <div class="video-wrapper">
          <video class="video-js" ref="videoplayer" width="100%"
                 style="background-color:rgb(18,9,37);width: 100%;height: 100%;">
          </video>
        </div>
      </div>

      <!-- 右侧商品栏 -->
      <div class="products-container">
        <div class="products-header">
          <h2>直播商品</h2>
          <div class="header-actions">
            <p>共 {{ products.length }} 件商品</p>
            <button class="refresh-btn" @click="refreshProducts">
              <i class="refresh-icon"></i> 刷新商品
            </button>
          </div>
        </div>
        <div class="products-list">
          <div v-for="(product, index) in products" :key="index" class="product-item">
            <img :src="product.image" :alt="product.name" class="product-image">
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <p class="product-price">¥{{ product.price }}</p>
              <button class="add-to-cart">加入购物车</button>
            </div>
          </div>
          <div v-if="products.length === 0" class="empty-products">
            <p>暂无商品信息</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import videojs from "video.js";
import {useRoute} from "vue-router";

const route = useRoute();

const liveDetail = ref({
  liveId: route.query.liveId,
  liveTitle: route.query.liveTitle,
  url: route.query.streamKey
});

// 示例商品数据
const products = ref([
  {
    id: 1,
    name: "时尚T恤",
    price: 99.00,
    image: "https://via.placeholder.com/80?text=T恤"
  },
  {
    id: 2,
    name: "休闲牛仔裤",
    price: 199.00,
    image: "https://via.placeholder.com/80?text=牛仔裤"
  },
  {
    id: 3,
    name: "运动鞋",
    price: 299.00,
    image: "https://via.placeholder.com/80?text=运动鞋"
  },
  {
    id: 4,
    name: "双肩背包",
    price: 159.00,
    image: "https://via.placeholder.com/80?text=背包"
  }
]);

// 刷新商品函数
const refreshProducts = () => {
  // 这里可以替换为实际的API调用
  console.log("刷新商品列表...");

  // 模拟刷新效果
  products.value = [
    ...products.value.slice(0, 2),
    {
      id: 5,
      name: "新款卫衣",
      price: 129.00,
      image: "https://via.placeholder.com/80?text=卫衣"
    },
    {
      id: 6,
      name: "潮流帽子",
      price: 59.00,
      image: "https://via.placeholder.com/80?text=帽子"
    }
  ];
};

const videoplayer = ref(null);
const myPlayer = ref(null);

onMounted(() => {
  myPlayer.value = videojs(videoplayer.value, {
    autoplay: true,
    controls: true,
    controlBar: true,
    bigPlayButton: true,
    sources: [{
      src: liveDetail.value.url,
      type: 'application/x-mpegURL'
    }]
  }, () => {
    console.log('播放器加载完成');
  });
});
</script>

<style scoped>
.live-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  background-color: #ffffff;
}

.live-content {
  display: flex;
  gap: 20px;
}

/* 左侧直播播放器样式 */
.live-player-container {
  flex: 3;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.live-header {
  padding: 15px 20px;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
}

.live-header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.live-id {
  margin: 5px 0 0;
  color: #666;
  font-size: 14px;
}

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 比例 */
  height: 0;
  background-color: rgb(18, 9, 37);
}

.video-wrapper .video-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 右侧商品栏样式 */
.products-container {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-height: 80vh;
  overflow-y: auto;
}

.products-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.products-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
  font-weight: 600;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.header-actions p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.refresh-btn {
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.refresh-btn:hover {
  background-color: #e9ecef;
  border-color: #c6c6c6;
}

.refresh-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 2.97-2.17 5.43-5 5.91V19h2v-2h4v-2h-4v-2h4v-2h-4V9c1.1 0 2-.9 2-2 0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.products-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  background-color: #f9f9f9;
  transition: all 0.2s;
}

.product-item:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.product-info {
  flex: 1;
}

.product-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.product-price {
  margin: 0 0 8px;
  color: #e53935;
  font-weight: bold;
  font-size: 18px;
}

.add-to-cart {
  background-color: #ff6b6b;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.add-to-cart:hover {
  background-color: #ff5252;
}

.empty-products {
  text-align: center;
  padding: 20px 0;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .live-content {
    flex-direction: column;
  }

  .products-container {
    max-height: none;
  }
}
</style>